<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .header {
            background-color: hotpink;
            height: 50px;
        }


        .container {
            display: flex;
        }

        .navbar {
            width: 200px;
            height: 500px;
            background-color: lightblue;
            flex-shrink: 0;
        }

        .body {
            flex-grow: 1;
            background-color: lightgreen;
            height: 500px;
        }

        .navbar-text {
            line-height: 30px;
            float: left;
        }
        .navbar-icon {
            width: 30px;
            height: 30px;
            float: left;
        }

        .navbar-text {
            line-height: 30px;
            float: left;
        }
    </style>
</head>

<body>
    <template id="navbarTemp">
        <div>
            <div @click="handleClick">
                <slot name="icon"></slot>
                <div class="navbar-text">{{text}}</div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </template>


    <template id="sonTemplate">
        <div>
            <header class="header">头部</header>
            <section class="container">
                <div class="navbar">
                    <navbar text="关于我们" @click="alertName">
                        <img class="navbar-icon" slot="icon"
                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598072416846&di=7747b60737244d9668db8bbe0afc8463&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F07%2F05%2F73394eadc45d7940691e77e16846e444.jpg"
                            alt="">
                    </navbar>
                    <navbar text="个人信息" @click="skip('/info')">
                        <img class="navbar-icon" slot="icon"
                            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598072416846&di=f6d613fe792bd5ed2738c932fac5b968&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F11%2F25%2F3b086f73cd7d03bc5b761ce531499f1b.jpg"
                            alt="">
                    </navbar>
                    <navbar text="登录" @click="skip('/login')">
                        <img class="navbar-icon" slot="icon"
                            src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1933915554,3309260243&fm=26&gp=0.jpg"
                            alt="">
                    </navbar>
                </div>
                <div class="body">
                    <router-view></router-view>
                </div>
            </section>
        </div>
    </template>



    <script>
        const son = {
            template: '#sonTemplate',
            methods: {
                alertName() {
                    alert("啦啦啦")
                },
                skip(url) {
                    this.$router.push(url)
                }
            },

        }
    </script>
    <script>


        const router = new VueRouter({
            routes: [{
                path: '/',
                component: son,
                children: [{
                    path: "/login",
                    component: {
                        template: '<div>登录</div>'
                    }
                },{
                    path: "/info",
                    component: {
                        template: '<div>注册</div>'
                    }
                }]
            }]
        })
        const navbar = {
            template: '#navbarTemp',
            props: {
                text: {
                    type: String,
                    default: '默认导航'
                }
            },
            methods: {
                handleClick() {
                    // 通知父组件该执行click事件了
                    this.$emit('click')
                }
            },
        }
        Vue.component('navbar', navbar)
    </script>









    <div id='app'>
        <router-view></router-view>
    </div>


    <script>
     
        

        const vm = new Vue({
            el: '#app',
            data: {},
            router,
            methods: {
                //     getDom(){
                //     console.log(this.$refs.my);
                //     this.$refs.son.alertName()
                // }

            },
            router
        })
    </script>
</body>

</html>